<%--
  Created by IntelliJ IDEA.
  User: wxw20
  Date: 2024/12/31
  Time: 8:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="Js_Css/HotelReviewsStyles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="Js_Css/HotelReviewsJs.js"></script>
    <style>
        .scenic_progress-bar-container {
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
            position: relative;
            display: flex;
            align-items: center;
        }

        .scenic_progress-bar {
            height: 100%;
            background-color: #007BFF;
            transition: width 0.5s ease;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
            color: white;
            font-size: 16px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)
        }

        .scenic_progress-bar::before {
            content: attr(data-value);
            position: absolute;
            right: 10px;
            color: white;
            font-size: 16px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)
        }

        .scenic_user-info {
            display: flex;
            align-items: center;
        }

        .scenic_user-details {
            flex: 1;
        }

    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>游客点评</h1>
<hr/>
<form action="" method="post">
    <div>
        <div>
            <:c:forEach var="comment" items="${commentsList}">
                <tbody>
                <tr>
                    <td rowspan="2" style="color: crimson"><h1>4.9超棒</h1></td>
                    <td>
                        好评率
                        <div class="scenic_progress-bar-container">
                            <div class="scenic_progress-bar" style="width: 10%;"></div> <!-- 假设设施评分为 90% -->
                        </div>
                    </td>
                    <td>
                        中评率
                        <div class="scenic_progress-bar-container">
                            <div class="scenic_progress-bar" style="width: 85%;"></div> <!-- 假设服务评分为 85% -->
                        </div>
                    </td>
                    <td rowspan="2">
                        差评率
                        <div class="scenic_progress-bar-container">
                            <div class="scenic_progress-bar" style="width: 95%;"></div> <!-- 假设清洁度评分为 95% -->
                        </div>
                    </td>
                </tr>
                <tr>
                    <!-- 这一行可以省略，因为评分项已经合并到上一行 -->
                </tr>
                </tbody>
            </:c:forEach>
        </div>
        <br>
        <div id="scenic_scenicCha" style="text-align: center;height: auto;">
            <a href="#">如何点评</a>
            单选按钮：
            <div>
                <input type="radio" value="1">全部
                <input type="radio" value="2">好评
                <input type="radio" value="3">差评
                <input type="radio" value="4">中评
            </div>
        </div>
        <hr/>
        <div class="scenic_user-info">
            <img src="img/img_4.png">
            <div class="scenic_user-details">
                <h3 class="scenic_user-name" name="scenic_zhuName">会员用户</h3>
            </div>
            <span>${comment.xin}</span>
        </div>
    </div>
</form>
<div id="scenic_pagination">
    <c:if test="${currentNo > 1}">
        <button class="scenic_pagination-button" data-pageno="${currentNo - 1}" onclick="change(${currentNo - 1})">
            上一页
        </button>
    </c:if>
    <c:forEach var="i" begin="1" end="${totalPages}">
        <c:choose>
            <c:when test="${i == currentNo}">
                <span>${i}</span>
            </c:when>
            <c:otherwise>
                <button class="scenic_pagination-button" data-pageno="${i}">${i}</button>
            </c:otherwise>
        </c:choose>
    </c:forEach>
    <c:if test="${currentNo < totalPages}">
        <button class="scenic_pagination-button" data-pageno="${currentNo + 1}" onclick="chang(${currentNo + 1})">
            下一页
        </button>
    </c:if>
</div>
</body>
<script>
    $(document).ready(function () {
        $('.scenic_pagination-button').click(function () {
        window.location.href="ChaXunServlet?"
        });
    })
</script>
</html>
